﻿/// <reference path="references.scss" />

//
// Sidebar Navigation Menus (Main menu, Brands menu etc.)
// ------------------------------------------------------

#offcanvas-menu {
    --ocm-header-bg: var(--gray-100);
    --ocm-footer-bg: var(--gray-100);
    --ocm-title-color: var(--primary);
    --ocm-border-color: #{rgba($black, 0.1)};
    --ocm-item-padding-x: 1.25rem;
    --ocm-item-padding-y: 0.75rem;
    --ocm-item-font-size: #{$font-size-sm};
    --ocm-item-line-height: 1.3;
    --ocm-item-selected-color: #{$warning};
    --ocm-brand-img-size: 80px;

    .nav-tabs {
        background-color: var(--ocm-header-bg);
    }

    .tab-pane {
        padding: 0;
    }

    .ocm-home-layer {
        padding: 0;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        > * {
            width: 100%;
            z-index: 1;
        }
    }

    .offcanvas-menu-body {
        flex-grow: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .offcanvas-menu-footer {
        padding: 0.75rem 1rem;
        padding: var(--ocm-item-padding-y) calc(var(--ocm-item-padding-x) * .75);
        background-color: var(--ocm-footer-bg);

        .mf-dropdown {
            display: block;

            .btn-labeled > b {
                background: transparent;
            }
        }
    }

    .menubar-link,
    .ocm-item {
        margin: 0;
        border-bottom: 1px solid var(--ocm-border-color);
        position: relative;
        display: block;

        .ocm-link {
            display: block;
            color: $body-color;
            line-height: var(--ocm-item-line-height);
            font-size: var(--ocm-item-font-size);
            padding: var(--ocm-item-padding-y) var(--ocm-item-padding-x);
            padding-inline-end: 1.5rem;
            text-decoration: none !important;

            &:active,
            &:focus {
                background-color: rgba($black, 0.05);
            }
        }

        &.has-children:after {
            position: absolute;
            inset-inline-end: 1rem;
            top: 50%;
            // Don't use transform here... the animation will overwrite it.
            margin-top: calc(var(--ocm-item-font-size) * -0.5);
            @include fontawesome('\f054', var(--ocm-item-font-size));
            color: var(--gray-700);
            font-size: 14px;
            width: var(--ocm-item-font-size);
            height: var(--ocm-item-font-size);
            min-height: var(--ocm-item-font-size);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        &.has-children.animating:after {
            animation: fa-spin .6s infinite linear;
            //margin-top: -9px;
            transform: none;
            transform-origin: center;
            font-family: fontastic;
            content: '\e8d3' !important;
        }

        &.selected:before,
        &.expanded:before {
            @include active-list-item(5px, var(--ocm-item-selected-color));
        }
    }

    .ocm-nav .ocm-back {
        padding-inline-start: 0;

        .fa {
            padding-inline-end: .425rem;
        }
    }

    .ocm-nav .show-current-node {
        font-weight: $font-weight-medium;
    }

    .ocm-menu-header {
        --ocm-back-size: 32px;

        position: relative;
        padding-block: 0.75rem;
        background-color: var(--ocm-header-bg);
        border-bottom: 1px solid var(--ocm-border-color);

        .ocm-link {
            --btn-height: var(--ocm-back-size);

            display: block;
            position: absolute;
            inset-inline-start: var(--ocm-item-padding-x);
            top: 50%;
            transform: translateY(-50%);
        }

        .ocm-title {
            color: var(--ocm-title-color);
            margin: 0;
            padding-inline-start: calc(var(--ocm-item-padding-x) + var(--ocm-back-size) + 6px);
            padding-inline-end: calc(var(--ocm-item-padding-x) + var(--ocm-back-size));
            text-align: center;
            line-height: 1.3;
        }
    }

    // Manufacturer tab
    .manufacturer-container {
        .ocm-item {
            padding: 0 var(--ocm-item-padding-x);

            .col-img {
                width: var(--ocm-brand-img-size);
                min-width: var(--ocm-brand-img-size);
                max-width: var(--ocm-brand-img-size);

                .ocm-img-link {
                    padding-block: var(--ocm-item-padding-y);
                    display: block;

                    > img {
                        width: 100%;
                    }
                }
            }

            .ocm-link {
                padding-inline: 0;
            }

            .col-img ~ .col-data > .ocm-link {
                //padding-inline-start: 0;
            }
        }

        .ocm-nav {
            margin-bottom: 0;
        }

        .show-all-manufacturers {
            padding: 1rem;
            border-bottom: 0;
        }
    }
}


//
// Offcanvas animation
// ------------------------------------------------------

#offcanvas-menu {
    .layer {
        transition: transform 0.3s ease-out;
        background: #fff;
        transform: translateX(-30%);
        z-index: 0;
        border-inline: 1px solid var(--ocm-border-color);

        &.show {
            transform: translateX(0);
			-webkit-transform: translateX(0);
            z-index: 1;
            border-color: transparent;
        }

        &.show ~ .layer {
            transform: translateX(100%);
            z-index: 2;
        }
    }

    .ocm-nav-layer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

//
// Offcanvas Service menu 
// ------------------------------------------------------

#ocm-service {
    .menubar {
        flex-direction: column;
        padding: 0;
        align-items: unset;
        justify-content: unset;
    }

    .menubar-group {
        margin-inline-start: 0 !important;
        flex-direction: column;
    }

    .menubar-link {
        text-transform: initial;
        padding: var(--ocm-item-padding-y) var(--ocm-item-padding-x);
        font-size: inherit;
        border-bottom: 1px solid var(--ocm-border-color);
        background-color: #fff;
        color: $body-color;
        border-radius: 0;
    }

    .menubar-icon {
        display: none;
    }

    .menubar-caret {
        position: absolute;
        inset-inline-end: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .openend .menubar-caret:before {
        content: "\f106";
    }

    .dropdown-menu {
        --dropdown-min-width: initial;
        --dropdown-border-radius: 0;
        --dropdown-inner-border-radius: 0;
        --dropdown-border-width: 0;
        --dropdown-box-shadow: none;

        position: static;
        float: initial;
        margin: initial;
        border: none;
        border-bottom: 1px solid var(--ocm-border-color);
        padding-inline: var(--dropdown-padding-x);
        padding-block: 0.75rem;
    }

    .dropdown-divider {
        display: none;
    }

    .dropdown.show > .menubar-link {
        font-weight: $font-weight-medium;
    }

    .menubar-link span {
        padding-inline-start: 0;
    }

    .dropdown-item {
        padding-inline-start: 1.5rem;
        font-size: inherit;

        span:not(.badge) {
            padding-inline-start: 0;
        }
    }
}


//
// Misc
// ------------------------------------------------------

// very weird hack to prevent loading icon from wobbling :-/ font-size is 20px
.touchevents .ocm-menu .ocm-item.has-children.animating:after {
    max-height: 18px;
}